<template>
  <div class="m-menu">
    <dl
      class="nav"
      @mouseleave="mouseleave">
      <dt>全部分类</dt>
      <dd
        v-for="(item, idx) in $store.state.home.menu"
        :key="idx"
        @mouseenter="enter">
        <i :class="item.type"/>
        {{ item.name }}
        <span class="arrow"/>
      </dd>
    </dl>
    <div
      v-if="kind"
      class="detail" @mouseenter="sover" @mouseleave="sout">
      <template v-for="(item, idx) in curdetail.child">
        <h4 :key="idx">{{ item.title }}</h4>
        <span
          v-for="v in item.child"
          :key="v">
          {{ v }}
        </span>
      </template>

    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        kind: '',
        menu: [{
          type: 'food',
          name: '美食',
          child: [{
            title: '美食',
            child: ['代金券','火锅']
          }]
        },{
          type: 'takeout',
          name: '外卖',
          child: [{
            title: '外卖',
            child: ['披萨','火锅']
          }]
        }]
      }
    },
    computed: {
        curdetail: function () {
          return this.$store.state.home.menu.filter((item) => item.type === this.kind )[0]
        }
    },
    methods: {
      /**
       * 鼠标移出
       */
      mouseleave: function () {
        let self = this
        self._timer = setTimeout(function () {
          self.kind = ''
        }, 150)
      },
      /**
       * 鼠标移入
       * @param e
       */
      enter: function (e) {
        // 获取到i上面的值
        this.kind = e.target.querySelector('i').className
        console.log(this.kind)
      },
      sover: function () {
        clearTimeout(this._timer)
      },
      sout: function () {
        this.kind = ''
      }
    }
  }
</script>

<style scoped>

</style>
